<template>
  <div style="width: 100%">
    <a-tabs
      v-if="productList.length !== 0"
      :default-active-key="defaultActiveKey"
      :tab-position="mode"
      :style="{ height: '500px', width: '100%' }"
      @prevClick="callback"
      @nextClick="callback"
      @tabClick="tabClick($event)"
    >
      <!-- <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`"> Content of tab {{ i }} </a-tab-pane> -->
      <a-tab-pane v-for="(product, index) in productList" :key="product.id" :tab="product.productName">
       
        <div>
          <a-form-model
            :model="model"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :rules="validatorRules"
            v-if="status"
            ref="form"
          >
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
                  <a-input v-model="model.productName" placeholder="请输入产品名称" disabled="true"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="产品上市时间"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="timeToMarket"
                >
                  <j-date placeholder="请选择产品上市时间" v-model="model.timeToMarket" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="持续供货时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyTime">
                  <a-input v-model="model.supplyTime" placeholder="请输入持续供货时间"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="供货量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyQuantity">
                  <a-input v-model="model.supplyQuantity" placeholder="请输入供货量"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="供应时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="availableTime">
                  <a-input v-model="model.availableTime" placeholder="请输入供应时间"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-form-model-item>
              <a-button type="primary" style="margin-left:50%" @click="add">保存备案</a-button>
              <a-button style="margin-left: 20px" type="primary" @click="submit(index)">提交备案</a-button>
            </a-form-model-item>
          </a-form-model>
          <div v-if="!status">已完成备案</div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="no-data" v-if="productList.length == 0"><a-icon type="frown-o" />暂无数据</div>
  </div>
</template>
<script>
import { size } from 'lodash'
import { getAction, postAction } from '../../api/manage'

export default {
  data() {
    return {
      index: 0,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      validatorRules: {
        timeToMarket: [{ required: true, message: '请输入产品上市时间!' }],
        supplyTime: [{ required: true, message: '请输入持续供货时间!' }],
        supplyQuantity: [{ required: true, message: '请输入供货量!' }],
        availableTime: [{ required: true, message: '请输入供应时间!' }],
      },
      mode: 'left',
      defaultActiveKey: '',
      //访问url地址统一管理
      url: {
        productListUrl: '/modules/zzzsProductRecording/listInfo',
        prdocutInfoUrl: '/modules/zzzsProductRecording/queryById',
        prdocutAddoUrl: '/modules/zzzsRecordOfSupplyAbility/add',
        submitRecordUrl: '/modules/zzzsRecordOfSupplyAbility/submitRecord',
        prdocutStatusUrl: '/modules/zzzsRecordOfSupplyAbility/getRecordStatus',
      },
      productList: [],
      status: false,
    }
  },
  created() {
    this.getProductList()
  },
  methods: {
    //提交备案
    submit(index) {
      this.$nextTick(console.log('1', document.getElementById('indexDiv')))

      this.$refs.form[index].validate((valid) => {
        if (valid) {
          postAction(this.url.submitRecordUrl, this.model).then((res) => {
            this.getStatusAbility(this.model.productId)
          })
        }
      })
    },
    callback(val) {
      console.log(val)
    },
    tabClick(event) {
      this.getStatusAbility(event)
    },
    //获取product列表
    getProductList() {
      getAction(this.url.productListUrl).then((res) => {
        this.productList = res.result
        this.defaultActiveKey = this.productList[0].id
        console.log(this.productList[0].id)
        this.getStatusAbility(this.productList[0].id)
      })
    },
    //获取prodcut信息
    getProductInfo(id = this.defaultActiveKey) {
      getAction(this.url.prdocutInfoUrl, { id: id }).then((res) => {
        let { ...model } = res.result
        console.log('model', model)
        this.model = model
        this.model.productId = res.result.id
        this.id = ''
        console.log(this.model)
      })
    },
    getStatusAbility(productId) {
      getAction(this.url.prdocutStatusUrl + `/${productId}`).then((res) => {
        console.log(res)
        this.status = res.result.status
        if (res.result.result) {
          this.model = res.result.result
        } else {
          this.getProductInfo(productId)
        }
      })
    },
    /**
     * 保存方法
     */
    add() {
      postAction(this.url.prdocutAddoUrl, this.model).then((res) => {
        if (res.success) {
          this.$message.success('保存备案信息成功')
        } else {
          this.$message.error('保存备案信息失败')
        }
        console.log(this.model)
      })
    },
  },
}
</script>
